<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/plugins/bui/bui.css"/>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        body{
            height: 100%;
            color: black;
        }
        .preview,html{
            height:100%;
        }
        .preview  .online_preview{
            height:90%;
            width:76%;
            float: left;
            border: 1px solid #cccccc;
            border-radius: 10px;
            margin-top:3%;
            margin-left:3%;
        }
        .preview .preview_top{
            height:9%;
            background: #ffffff;
        }
        .preview .preview_top p{
            width:90%;
            margin:0 auto;
        }
         .preview .preview_top p span{
            font-size: 46px;
            line-height: 78px;
            color: black;
         }
        .preview .preview_bottom{
            width:90%;
            margin:0 auto;
            background: #EFF3FC;
            height:86%;
        }
         .preview  .detail{
            height:90%;
            width:17%;
            float: right;
            background: #ffffff;
            border: 1px solid #cccccc;
            border-radius: 10px;
            margin-top:3%;
            margin-right:3%;
         }
         ul,li{
            list-style: none;
         }
         .preview  .detail table{
             width:80%;
             margin:0 auto;
         }
         .preview  .detail table tr{
             height: 35px;
             font-size:14px;
         }
         .preview  .detail table tr td{
             text-align: center;
         }
         .preview  .detail table tr:nth-child(2n+1){
             background: #eeeeee;
        }
        .preview  .detail div{
            text-align: center;
            padding: 12px;
            font-size: 20px;
            width: 80%;
            margin: 0 auto;
            border-bottom: 1px solid #eeeeee;
            margin-bottom: 15px;
        }
        .btn{
            margin-top:25px;
        }
        .bui-tree-list {
            height: 200px;
        }
    </style>

</head>
<body ng-app="preview" ng-controller="previewCtrl">
  <div class="preview">
      <div class="preview_top">
          <p>
              <span ng-bind="folderNmae"></span>
              <button class="btn btn-info pull-right" ng-click="downLoad()">下载</button>
              <button class="btn btn-info pull-right" style="margin-right: 15px" ng-click="share()">分享</button>
          </p>
      </div>
      <div class="preview_bottom">
          <div class="online_preview">
              <iframe ng-src="{$ someUrl$}" frameborder="0" height="100%" width="100%"></iframe>
          </div>
          <div class="detail">
              <div>属性</div>
             <table>
                 <tr>
                     <td>全宗</td> <td>李静</td>
                 </tr>
                  <tr>
                     <td>档号</td> <td>50</td>
                 </tr>
                 <tr>
                     <td>责任人</td> <td>李梅</td>
                 </tr>
                 <tr>
                     <td>机构</td> <td>办公室</td>
                 </tr>
                  <tr>
                     <td>机密</td> <td>内部</td>
                 </tr>
                  <tr>
                     <td>存档期限</td> <td>30年</td>
                 </tr>
                  <tr>
                     <td>状态</td> <td>已归档</td>
                 </tr>
                  <tr>
                     <td>年度</td> <td>2019</td>
                 </tr>
                 <tr>
                     <td>档案盒</td> <td>A01-001-001</td>
                 </tr>
                 <tr>
                     <td>文号</td> <td>字2019</td>
                 </tr>
                 <tr>
                     <td>件号</td> <td>2019</td>
                 </tr>
                 <tr>
                     <td>归档时间</td> <td>2019/3/4</td>
                 </tr>
                  <tr>
                     <td>归档人</td> <td>admin</td>
                 </tr>
             </table>
              <div class="line"></div>
          </div>
      </div>
  </div>
  <script type="text/javascript" src="/static/assets/js/jquery-3.1.0.js"></script>
  <script type="text/javascript" src="/static/assets/js/bui-min.js"></script>
  <script type="text/javascript" src="/static/plugins/angular/angular.min.js"></script>
  <script type="text/javascript" src="/static/plugins/angular-ui/ui-bootstrap-tpls.min.js"></script>
  <script type="text/javascript" src="/static/plugins/PNotify/pnotify.custom.min.js"></script>
  <script type="text/javascript" src="/static/plugins/pnotify.js"></script>
  <script type="text/javascript" src="/static/bootstrap/js/bootstrap..min.js"></script>
  <script>
      var app = angular.module('preview', ['soc.PNotify', 'ui.bootstrap']);
      app.filter('trustAsResourceUrl', ['$sce', function($sce) {
            return function(val) {
                return $sce.trustAsResourceUrl(val);
            };
        }]);
      app.config(function ($interpolateProvider) {
        $interpolateProvider.startSymbol('{$');
        $interpolateProvider.endSymbol('$}');
    })
       app.controller('previewCtrl', function ($scope, $http, $rootScope,$sce,$modal,serPNotify){
           //获取在线预览的地址
{#           $http({#}
{#                method: 'POST',#}
{#                url: '/api/document/createdoc',#}
{#                data: {"fileList": fileName},#}
{#            }).then(function successCallback(response) {#}
{#                $scope.$scope.someUrl = response.data;#}
{#                $scope.DocList();#}
{#            }, function errorCallback(response) {#}
{#                serPNotify.error("接口请求失败");#}
{#            });#}
           $scope.someUrl = $sce.trustAsResourceUrl('http://www.w3school.com.cn/tags/tag_iframe.asp');
           $scope.folderNmae="aaaa.doc";
           var params={
               "id":"",
               "title":""
           }
           //分享
            $scope.share = function (id, name) {
            $modal.open({
                templateUrl: '/static/html/myShare/shareChance.html',
                controller: 'shareChanceCtrl',
                scope: $scope,
                resolve: {
                    params: function () {
                        params.id = id;
                        params.title = name;
                        return params;
                    }
                }
            });
        };
       })

       //分享选择的控制器
    app.controller('shareChanceCtrl', function ($scope, $modalInstance, $http, $rootScope, serPNotify, params) {
        $scope.title = params.title;
        $scope.shareWith = {
            fileID: params.id,
            treeID: "",
            treeLevel: ""
        }
        //获取树结构数据
        $scope.treeData = function () {
            $http.post('/api/orginazation/getorguser').then(
                function (resp) {
                    $scope.tree_data = resp.data.data;
                    BUI.use('bui/tree', function (Tree) {
                        var tree = new Tree.TreeList({
                            render: '#ToShare',
                            nodes: $scope.tree_data
                        });
                        tree.render();
                        tree.on('itemclick', function (ev) {
                            var item = ev.item;
                            console.log("item", item);
                            $scope.shareWith.treeID = item.id;
                            $scope.shareWith.treeLevel = item.level;
                            $('.log').text(item.level);
                        });
                    });

                },
                function (resp) {
                    alert("接口请求失败");
                });
        };
        $scope.treeData();
        $scope.confirm = function () {
            $modalInstance.close();
            $http({
                method: 'POST',
                url: '/api/share/adddoc',
                data: $scope.shareWith
            }).then(function successCallback(response) {
                if(response.data.success==1){
                    serPNotify.success("分享成功");
                }else{
                    serPNotify.error("分享失败");
                }
            }, function errorCallback(response) {
                // 请求失败执行代码
                serPNotify.error("分享失败");
            });
        };
        $scope.cancel = function () {
            $modalInstance.dismiss();
        };
    });
  </script>
</body>
</html>